<!--  CSS includes -->
<link href="/assets/js/dojo-release-1.1.0/dijit/themes/nihilo/nihilo.css" rel="stylesheet" type="text/css" />
<link href="/assets/js/dojo-release-1.1.0/dojo/resources/dojo.css" rel="stylesheet" type="text/css" />
    
<style type="text/css">
    @import "/assets/js/dojo-release-1.1.0/dojox/highlight/resources/highlight.css";
    @import "/assets/js/dojo-release-1.1.0/dojox/highlight/resources/pygments/default.css";
    @import "/assets/js/dojo-release-1.1.0/dojo/resources/dojo.css";    
    @import "/assets/js/dojo-release-1.1.0/dojoc/sandbox/menu/resources/AccordionMenu.css";    
    @import "/assets/js/dojo-release-1.1.0/dojoc/sandbox/rounded/resources/Rounded.css";       
</style>
<style type="text/css">
    @import "/assets/js/dojo-release-1.1.0/dojox/grid/_grid/Grid.css";
    @import "/assets/js/dojo-release-1.1.0/dojox/grid/_grid/nihiloGrid.css";
</style>

<script type="text/javascript" src="/assets/js/dojo-release-1.1.0/dojo/dojo.js"
      djConfig="parseOnLoad: true"></script>
      
<script type="text/javascript">
  dojo.require("dojox.charting.Chart2D");
  dojo.require("dijit.form.NumberSpinner");

  var chart1;

  // The data to use.
  var seriesData = [1, 2, 2, 3, 4, 5, 5, 7];

  // This function creates the chart, and is really all you
  // need. All other code is to allow you to update it on the
  // fly.
  dojo.addOnLoad(function(){
    chart1 = new dojox.charting.Chart2D("simplechart");
    chart1.addAxis("y", {vertical: true});
    chart1.addAxis("x");
    chart1.addPlot("default", {
      hAxis: "x",
      vAxis: "y",
      type: "Columns",
      areas: true,
      gap: 5
    });
    chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
    changeColor("blue");
  });
  
  function changeColor(color) {
    // Load the required color plot information
    dojo.require("dojox.charting.themes.PlotKit." + color);
    chart1.setTheme(dojox.charting.themes.PlotKit[color]);
    chart1.render();
  }
  
  //Create the inputs that allow you to update the chart
  //on the fly.
  function createInputs() {
    var div = dojo.byId("seriesInputs");

    var inputs = [];
    dojo.forEach(seriesData, function(item){
      var input = new dijit.form.NumberSpinner({
        value: item,
        constraints: {min: 0, max:100}
      });
      inputs.push(input);
      div.appendChild(input.domNode);
      dojo.style(input.domNode, "width", "60px");
      var updateFn = function(){
        seriesData = [];
        dojo.forEach(inputs, function(inputWidget){
          seriesData.push(inputWidget.getValue());
        });
        chart1.updateSeries("Series 1", seriesData);
        chart1.render();
      };
      // Update the change when the values are changed.
      dojo.connect(input, "setValue", updateFn);
    });
  }
  dojo.addOnLoad(createInputs);
</script>
<style type="text/css">
  #seriesInputs .dijitInputField, #seriesInputs .dijitInputField input {
    width: 30px;
  }
</style>
Select a color: 
<select onchange="changeColor(this.value);">
  <option value="blue" selected>Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="cyan">Cyan</option>
  <option value="orange">Orange</option>
  <option value="purple">Purple</option>
</select>
<div id="seriesInputs">
  Choose Values: 
</div>
<div id="simplechart" style="width: 350px; height: 350px;"></div>
